<script>
import { CloseBold } from "@element-plus/icons-vue";
import { ElDescriptions, ElDescriptionsItem } from 'element-plus'
export default {
  name: "information-position",
  components: { CloseBold, ElDescriptions, ElDescriptionsItem },
  data() {
    return {};
  },
  props: {
    mainTitle: {
      type: [String, Number],
      default: ""
    },
    longitude: {
      type: [String, Number],
      default: ''
    },
    latitude: {
      type: [String, Number],
      default: ''
    },
    unid: {
      type: [String, Number],
      default: ''
    },
  },
  computed: {},
  watch: {
    showComponent(nV) { },
  },
  mounted() {
    this.init();
  },
  beforeUnmount() {
  },
  methods: {
    close() {
      this.$emit('close', {
        unid: this.unid
      })
    },
    init() {
    }
  },
};
</script>

<template>
  <div class="information-normal">
    <header class="font-alimamashuheiti">
      <span>{{ mainTitle }}</span>
      <div class="funciton-area">
        <div class="icon-area hover-pointer" @click.stop="close">
          <CloseBold />
        </div>
      </div>
    </header>
    <main>
      <!-- <div class="item">
        <span class="key">经度</span>
        <span class="value">{{ longitude }}</span>
      </div>
      <div class="item">
        <span class="key">纬度</span>
        <span class="value">{{ latitude }}</span>
      </div> -->
      <el-descriptions :column="1" title="" border>
        <el-descriptions-item label="经度">{{ longitude }}</el-descriptions-item>
        <el-descriptions-item label="纬度">{{ latitude }}</el-descriptions-item>
      </el-descriptions>
    </main>
    <div class="popup-tip-container">
      <div class="popup-tip"></div>
    </div>
  </div>
</template>
<style lang="less" scoped>
@shadow-color: rgba(255, 255, 255, 0.2);

.information-normal {
  position: relative;
  // width: 25rem;
  background-color: #fff;
  box-shadow: 0 0 0 .5rem @shadow-color;

  &>header {
    color: #2168b2;
    padding: .5rem;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &>span {
      font-size: 14px;
      cursor: auto!important;
      padding-right: 1rem;
    }

    &>.funciton-area {
      display: inline-flex;
      &>.icon-area {
        width: 20px;
        height: 20px;
      }
    }
  }

  &>main {
    cursor: auto!important;
    padding: 1rem;

    &>.item {
      line-height: 1.5;

      & .key {
        font-size: 1.2rem;
      }

      & .value {
        padding-left: 1rem;
        font-size: 1.4rem;
      }
    }
  }

  &>.popup-tip-container {
    position: absolute;
    bottom: -20px;
    left: 50%;
    margin-left: -20px;
    content: "";
    width: 40px;
    height: 20px;
    pointer-events: none;
    overflow: hidden;

    &>.popup-tip {
      width: 20px;
      height: 20px;
      background-color: #fff;
      margin: -10px auto 0;
      transform: rotate(45deg);
      box-shadow: 0 0 5px @shadow-color;
    }
  }
}
</style>
